<template>
    <div class="bi-loading text-bg-light border border-light-subtle">
        <i class="fa fa-spinner fa-spin"></i>
        <span class="text">{{text}}</span>
    </div>
</template>


<script>
export default{
    data(){
        return {
            show:false,
            _dom:null
        }
    },
    props:{
        text:{
            type:String,
            default:''
        }
    },
    methods:{
        close(){
            this._dom.remove();
        }
    }
}
</script>


<style>
.bi-loading-wrapper{
    left:0px;
    top:0px;
    width: 100vw;
    height: 100vh;
    position:absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(75, 73, 73, 0.1);
}

.bi-loading{
    display: flex;
    align-items: center;
    padding: 0.35em;
    border-radius: 5px;
}

.bi-loading .text{
    padding-left: 0.25em;
    font-size: 14px;
}
</style>